<!--这是添加已有课程组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
				<span>添加已有课程</span>
				<p>
					<em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="padding: 0 20px;" v-loading="listLoading">
				<div style="border-top: 1px solid #eee;padding-top: 10px;">
					<el-input v-model="listQuery.courseName" clearable placeholder="请输入课程名称" @keyup.enter.native="searchUser" style="width: 400px;"></el-input>
					<el-button type="success" class="search" icon="el-icon-search" @click="searchUser">搜索</el-button>
            <div>&nbsp;</div>
          <el-checkbox-group v-model="checkList" class="checkbox">
            <el-checkbox style="width: 100%;line-height: 32px;padding-left:20px;" v-for="(item,index) in courses" :label="item.courseId" :key="index">{{item.name}}</el-checkbox>
          </el-checkbox-group>

				</div>
          <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
            :total="listQuery.total">
          </el-pagination>
      </div>
				<p style="text-align: center;line-height: 80px;">
					<el-button type="primary" icon="el-icon-check" @click="saveCourses">保存</el-button>
					<el-button type="info" @click="close">取消</el-button>
				</p>
			</div>
		</div>

	</div>
</template>
<script>
import { toGetCourseList, toSaveCourses } from '@/api/column'
export default {
  components: {
  },
  props: [
    'columnId'
  ],
  data() {
    return {
      checkList: [],
      listQuery: {
        total: 0,
        page: 1,
        limit: 0,
        courseName: null
      },
      courses: [],
      listLoading: false
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    getCourseList() {
      this.listLoading = true
      toGetCourseList(this.listQuery)
        .then(res => {
          // 正确回调
          this.courses = res.data.data.data
          this.listQuery.total = res.data.data.total
          this.listLoading = false
          console.log('courses', this.courses)
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveCourses() {
      // 保存课程
      if (this.checkList.length < 1) {
        this.$message({
          type: 'info',
          message: '请选择一个课程在点击保存！'
        })
        return
      } else {
        console.log(this.checkList)
        var data = { columnId: this.columnId, checkList: this.checkList }
        toSaveCourses(data)
          .then(res => {
          // 正确回调
            this.$message({
              type: 'info',
              message: '添加成功！'
            })
            this.getCourseList()
            this.close()
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    searchUser() {
      this.getCourseList()
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getCourseList()
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getCourseList()
    },
    handleCheckAllChange(val) {
      this.checkList = val ? this.courses : []
    },
    close() {
      this.$emit('hideAddCourses', false)
    }
  }
}
</script>
<style scoped>
p,h3{ margin: 0;}
	.addBox {
		/* width: 600px; */
		height: 550px;
		background: #fff;
		position: fixed;
		left: 25%;
    right: 25%;
    bottom: 15%;
		top: 5%;
		z-index: 120;
	}
  .checkbox {
    height: 300px;
    overflow: auto;
  }
  .fixTitle{
    position: relative;
    width: 100%;
  }
  .el-checkbox {
    margin-left: 0 !important;
  }
  /* .userRadio{
    text-align:left;
    width:100%;
    margin:10px 0;
  }
  .headImg{
		width: 30px;
		height: 30px;
		vertical-align: middle;
    border-radius:100%;
	} */
</style>
